<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>登录</h1>
  <hr>

  <h3>AJAX请求：</h3>
  <!-- action="/login" method="post" enctype="application/x-www-form-urlencoded" -->
  <form>
    用户名:<input type="text" name="username" id="username" />
    密码：<input type="password" name="password" id="password" />
    <!-- 图片：<input type="file" name="photo" /> -->
    <button type="button" id="btnLogin">登录</button>
  </form>
  <!-- <script src="./util/jquery-3.6.0.js"></script> -->
  <script>
    let btnLogin = document.getElementById( 'btnLogin' )
    // 1. 绑定事件
    btnLogin.onclick = function () {
      let username = document.getElementById( "username" ).value;
      let password = document.getElementById( "password" ).value;
      // console.log( username, password );
      // 2. 创建XHR对象
      let xhr = new XMLHttpRequest()  // 创建AJAX引擎的实例化对象
      // 3. 链接后台服务器
      xhr.open( 'post', '/login', true )  // 如果url没有IP:port，那么表示请求的时自己的服务器

      xhr.setRequestHeader( "Content-type", "application/x-www-form-urlencoded" ) // POST需要重新设置请求头
      xhr.send( `username=${ username }&password=${ password }` )

      // 4. 接收后台数据
      xhr.onreadystatechange = function () {
        // console.log( xhr );
        if ( xhr.readyState === 4 && xhr.status === 200 ) {
          let res = JSON.parse( xhr.responseText ) // 获取返回的数据， 数据格式默认时文本格式。

          if ( res.code === 0 ) {
            //登录成功
            console.log( res );
            sessionStorage.setItem( 'userinfo', JSON.stringify( res.data[ 0 ] ) );
            // localStorage ，永久存储，除非手动清除或者卸载浏览器时，提示你清除。
            // sessionStorage ，临时存储，关闭浏览器，就自动删除。
            location.href = "/pages/main.html"
          } else {
            //登录失败
            console.log( res );
          }
        }
      }
    }


  </script>
</body>

</html>